<template>
    <div>
        <div class="table_box">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="序号" type="index">
                </el-table-column>
                <el-table-column prop="id" label="充值ID">
                </el-table-column>
                <el-table-column prop="cTime" label="日期">
                    <template #default="scope">
                        {{ scope.row.cTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="充值金额">
                </el-table-column>
                <el-table-column prop="desc" label="备注">
                </el-table-column>
            </el-table>
        </div>

        <div class="page_box">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageObj.currPage" :page-sizes="[3, 5, 10, 15]" :page-size="pageObj.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'PayTable',
    props: ['tableData', 'total', 'pageObj'],
    setup() {
        // 每页多少条
        const handleSizeChange: any = (size: any) => {
            console.log(size);
            
            // this.$parent.pageObj.pageSize = size;
            // this.$parent.pageObj.currPage = 1;
            // this.$parent.getData();
        }
        // 当前页
        const handleCurrentChange: any = (page: any) => {
            console.log(page);
            
            // this.$parent.pageObj.currPage = page;
            // this.$parent.getData();
        }
        return { handleSizeChange, handleCurrentChange }
    }
});
</script>

<style lang="less" scoped>
.table_box {
    background: #fff;
    padding: 0 20px;
}

.page_box {
    text-align: center;
    background: #fff;
    padding: 10px 0;
}
</style>